<template>
  <view class="normal-login-container">
    <view class="top-decoration"></view>
    <view class="logo-content">
      <image class="logo-image" :src="globalConfig.appInfo.logo" mode="aspectFit"></image>
      <text class="title">{{globalConfig.appInfo.name || '微信快捷登录'}}</text>
    </view>
    <view class="login-form-content">
      <view class="action-btn">
        <button @click="wxHandleLogin" class="login-btn">
          <text class="iconfont icon-weixin"></text>
          <text>微信一键登录</text>
        </button>
      </view>
      
      <view class="action-btn back-btn-wrapper">
        <button @click="goBack" class="back-btn">
          <text class="iconfont icon-left"></text>
          <text>返回浏览主页</text>
        </button>
      </view>
      
      <view class="xieyi">
        <label class="checkbox-container" @click="agreed = !agreed">
          <checkbox v-model="agreed" />
          <text class="text-grey1">我已阅读并同意</text>
          <text @click.stop="handleUserAgrement" class="text-blue">《用户协议》</text>
          <text @click.stop="handlePrivacy" class="text-blue">《隐私协议》</text>
        </label>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        globalConfig: getApp().globalData.config,
        wxLoginForm: {
          code: "",
          encryptedIv: "",
          encryptedData: ""
        },
		agreed: false
      }
    },
    methods: {
		//切换同意状态
		  toggleAgree() {
		    this.agreed = !this.agreed;
		  },
      // 返回按钮
      goBack() {
        uni.navigateBack({
          delta: 1,
          fail: function() {
            // 如果返回失败，说明是直接进入的登录页面，跳转到首页
            uni.reLaunch({
              url: '/pages/index'
            })
          }
        })
      },
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      },
      // 微信登录方法        
      wxLogin(){
        //获取服务商信息
        uni.getProvider({
          service: "oauth",
          success: (res) => {
            console.log(res);
            if(~res.provider.indexOf("weixin")){
              //登录
              uni.login({
                provider: "weixin",
                success: (loginRes) => {
                  console.log("登录",loginRes);
                  this.wxLoginForm.code = loginRes.code;
                  //后端发登录
                  this.sendWxLoginFormToLocalService();
                }
              })
            }
          }
        })
      },	    
      //微信授权登录
      async wxHandleLogin() {
		//检查是否同意协议
		if (!this.agreed) {
		    this.$modal.alert("请先阅读并同意用户协议和隐私协议");
		    return;
		}
        console.log("微信小程序发起授权登录")
        this.$modal.loading("登录中，请耐心等待...")
        //获取用户信息
        uni.getUserProfile({
          desc:"获取用户信息",
          success: (resInfo) => {
            console.log("用户信息",resInfo)
            //设置偏移量和加密数据
            this.wxLoginForm.encryptedIv = resInfo.iv;
            this.wxLoginForm.encryptedData = resInfo.encryptedData;
            this.wxLogin();
          },
          fail: (res) => {
            console.log("获取用户信息失败！",res)
            this.$modal.closeLoading()
          }
        }) 
      },
      //向后端发起登录请求
      sendWxLoginFormToLocalService(){
        console.log("向后端发起登录请求...........")
        this.$store.dispatch('WxLogin', this.wxLoginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          this.$modal.msgError("微信登录失败！")
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: #ffffff;
    height: 100vh;
    overflow: hidden;
  }

  .normal-login-container {
    width: 100%;
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff; // 强化写法，确保白底

    .top-decoration {
      display: none;
    }

    .logo-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 100rpx 40rpx 40rpx;
      flex: 1;

      .logo-image {
        width: 320rpx;
        height: 320rpx;
        border-radius: 40rpx;
        margin-bottom: 40rpx;
      }

      .title {
        font-size: 48rpx;
        font-weight: bold;
        color: #333333;
        margin: 20rpx 0 10rpx;
        letter-spacing: 2rpx;
      }
    }

    .login-form-content {
      text-align: center;
      width: 90%;
      padding: 40rpx 40rpx 60rpx;
      margin: 0 auto 0;
      position: absolute;
      bottom: 80rpx;
      left: 50%;
      transform: translateX(-50%);

      .action-btn {
        width: 100%;
        margin-bottom: 30rpx;
        
        &.back-btn-wrapper {
          margin-bottom: 40rpx;
        }

        .login-btn,
        .back-btn {
          width: 100%;
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #07c160 0%, #06ae56 100%);
          color: #ffffff;
          font-size: 32rpx;
          font-weight: bold;
          border: none;
          border-radius: 44rpx;
          box-shadow: 0 10rpx 30rpx rgba(7, 193, 96, 0.4);
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.98);
            box-shadow: 0 6rpx 20rpx rgba(7, 193, 96, 0.3);
          }

          .iconfont {
            margin-right: 12rpx;
            font-size: 36rpx;
          }
        }

        .back-btn {
          background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
          box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
          
          &:active {
            box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
          }
        }
      }
      
      .xieyi {
        color: #666;
        margin-top: 0;
        
        .checkbox-container {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          
          checkbox {
            margin-right: 10rpx;
            transform: scale(1.1);
          }
          
          .text-grey1 {
            color: #666666;
            font-size: 28rpx;
          }
          
          .text-blue {
            color: #07c160;
            font-size: 28rpx;
            font-weight: 500;
          }
        }
      }
    }
  }
</style>
